<!--
  * @Description 导入文件弹窗
  * @Author 莫发达
  * @create 2024-09-04 14:51 周三
-->
<script setup lang="ts">
import {ref, useAttrs} from 'vue'
import BaseUpload from '../index.vue'
import type {UploadInstance} from "element-plus";
import SvgIcon from "@/components/svg-icon/index.vue"; // 图标组件

const props = defineProps<{}>();
const emits = defineEmits(['download'])

const uploadRef = ref<InstanceType<typeof BaseUpload>>()

const attrs = useAttrs()

defineExpose({
  get uploadRef(): UploadInstance {
    return uploadRef.value.uploadRef
  },
  get baseUpload(): InstanceType<typeof BaseUpload> {
    return uploadRef.value
  },
  /**
   * 获取文件信息
   */
  get fileList(): string[] {
    return uploadRef.value.fileList as unknown as string[]
  },
  /**
   * 获取文件名
   */
  get fileName(): string | undefined {
    return uploadRef.value.fileList?.[0] as unknown as string
  }
})
</script>

<template>
  <article class="flex flex-col gap-4">
    <header class="flex h-10 items-center gap-4 bg-gray-50 px-4 text-text-primary">
      <h2>导入文件请务必按模板格式正确填写</h2>
      <button
        class="flex items-center gap-1 text-primary"
        @click.stop="$emit('download')"
      >
        <SvgIcon
          svg="upload/download"
          size="14"
        />
        下载模板
      </button>
    </header>

    <BaseUpload
      ref="uploadRef"
      class="w-full"
      template="import"
      :drag="true"
      accept=".xls,.xlsx"
      :limit="1"
      :minio="false"
      :exceed-replace="true"
      placeholder="仅支持扩展名：.xls .xlsx，文件上传大小限制10M"
      v-bind="attrs"
    />
  </article>
</template>

<style scoped lang="less"></style>
